import {
  Button,
  Divider,
  Icon,
  InputNumber,
  message,
  Space,
  Spin,
  Table,
  Tag
} from "@bytedance/mona-ui"
import type { ColumnProps } from "@bytedance/mona-ui/es/components/table"
import React, { useState } from "react"
import { store } from "~store"
import { LtaLp } from "~store/controller/funcTabs"
export function gotointenpage(type: number) {

  switch (type) {
    case 0:
      // 限时购
      // getGotoPageUrl("/ffa/marketing/tools/limitsales")
      store.dispatch(LtaLp(2))
      break
    case 1:
      // 满减
      getGotoPageUrl("/ffa/marketing/tools/moneyoff")
      break
    case 2:
      // 新人礼金
      getGotoPageUrl("/ffa/marketing/union/allowance/home")
      break
    case 3:
      // 惊喜
      getGotoPageUrl("/ffa/marketing/precise-marketing/create")
      break
    case 4:
      // 优惠券
      // getGotoPageUrl("/ffa/marketing/coupon/home")
      store.dispatch(LtaLp(3))

      break
    default:
      break
  }
  function getGotoPageUrl(urlstr) {
    const goUrl = location.origin + urlstr
    // location.href = goUrl
    window.open(goUrl)
  }
}

export default function OfferDetails(props: any) {
  const {
    detailsInfo,
    getShowDetiel,
    goodDetail,
    compenterinfodata,
    flashWithGoodsDataItem,
    displaySpecList
  } = props
  const { setdata, changeAddGoodsNum } = props
  if (!detailsInfo) return
  const {
    activetiGoodItem, // 限时限量购
    getDiscountActivityFarmetData, // 满减活动
    getDiscountActivityOnePrdFarmetData, // 满减活动 同品多件
    getNewUserGiftFarmeData, // 新人礼金
    supTicket, // 惊喜券
    couponData // 优惠券
  } = detailsInfo

  changeAddGoodsNum &&
    compenterinfodata &&
    !compenterinfodata.datainfokey &&
    setTimeout((_) => changeAddGoodsNum(1), 137)
  function setAddtagname() {
    if (
      compenterinfodata.giftlist &&
      compenterinfodata.giftlist.length &&
      compenterinfodata.addnumsmanjian
    ) {
      return "券后价"
    }
    if (compenterinfodata.addnumsmanjian || compenterinfodata.addnumsmanjianOne) {
      return "满减活动价"
    }
    return "限时价"
  }
  function copyToClipboard(text) {
    navigator.clipboard
      .writeText(text)
      .then(function () {
        message.success("复制成功")
      })
      .catch(function (err) {
        message.error("复制失败")
      })
  }
  interface yufeitypes {
    diqu: string
    temperu: string
  }
  const getonterdata: yufeitypes[] =
    flashWithGoodsDataItem &&
    flashWithGoodsDataItem.yunfeiconterlist.list.map((res, index) => {
      const getrjson = JSON.parse(JSON.stringify(res))
      getrjson.index = index
      return getrjson
    })
  const tabtitles: ColumnProps<yufeitypes>[] = [
    {
      title: "运送地区",
      key: "0",
      dataIndex: "diqu"
    },
    {
      title: "计费规则",
      key: "1",
      dataIndex: "temperu",
      width: "20%"
    }
  ]
  const [showMenberIcon, setshowMenberIcon] = useState(true)
  const [showCoulIcon, setshowCoulIcon] = useState(true)
  return (
    (goodDetail && getShowDetiel && (
      <div className="outrboxname">
        <div className="topconternt">
          <div className="leftinfodata">
            <div className="good-img-title-box">
              <div className="left-img">
                <img
                  src={goodDetail.img}
                  alt={goodDetail.name}
                  className="imagecontent"
                />
              </div>
              <div className="right-title-tag">
                <Space direction="vertical" size={4} align="start">
                  <div className="title-box">{goodDetail.name}</div>
                  <div className="id-box">
                    ID: {goodDetail.product_id}
                    <Icon
                      type="CopyIcon"
                      className="copyiconitem"
                      onClick={() => copyToClipboard(goodDetail.product_id)}
                    />
                  </div>
                  <div className="tags-box">
                    {...detailsInfo.goodTagsData.map((res, index) => (
                      <Tag bordered key={index}>
                        {res}
                      </Tag>
                    ))}
                  </div>
                </Space>
              </div>
            </div>
            <div className="right-price-box">
              <Space direction="vertical" size={4} align="start">
                {activetiGoodItem.originalPrice ? (
                  <div className="order-price">
                    原价格：{activetiGoodItem.originalPrice}
                  </div>
                ) : (
                  <div>
                    <Space size={4}>
                      <span
                        style={{
                          color: "#FF0000",
                          fontSize: "13px",
                          fontWeight: 900
                        }}>
                        暂未设置限量购活动
                      </span>
                      <Button
                        size="mini"
                        type="primary"
                        onClick={() => {
                          props.setDetailsStatus && props.setDetailsStatus(false)
                          store.dispatch(LtaLp(2))
                        }}>
                        前往设置
                      </Button>
                    </Space>
                  </div>
                )}
                {activetiGoodItem.tagname && (
                  <div className="now-price">
                    <Tag>{activetiGoodItem.tagname}活动价</Tag>
                    {activetiGoodItem.shopSvalue && (
                      <Tag type="success">
                        打 {activetiGoodItem.shopSvalue} 折
                      </Tag>
                    )}
                    : {activetiGoodItem.nowPrice}
                  </div>
                )}
                <div className="getpriterbox">
                  <div className="activitbox">
                    <span className="titcontent">
                      {compenterinfodata.business_code_name && (
                        <Tag
                          bordered={false}
                          style={compenterinfodata.business_code_obj}>
                          {compenterinfodata.business_code_name}
                        </Tag>
                      )}
                      {compenterinfodata.showpritername}￥
                    </span>
                    <span className="priternum">
                      {(compenterinfodata.getSkuPriter.price / 100).toFixed(2)}
                    </span>
                    {compenterinfodata.getSkuPriter.origin_price && (
                      <span className="noshowtenp">
                        ￥
                        {(
                          compenterinfodata.getSkuPriter.origin_price / 100
                        ).toFixed(2)}
                      </span>
                    )}
                  </div>
                </div>
                <div className="youselect">
                  已选择:{compenterinfodata.selecttext}{" "}
                  {compenterinfodata.shopSvalue && (
                    <Tag type="success">{compenterinfodata.shopSvalue}</Tag>
                  )}
                  {compenterinfodata.getSkuPriter.user_limit && (
                    <Tag bordered transparentBg type="success">
                      限购:{compenterinfodata.getSkuPriter.user_limit}件
                    </Tag>
                  )}
                </div>
                {/* <div className="youselect">
                 活动剩余库存: 1234
                </div> */}
              </Space>
            </div>
          </div>
          <div className="rightinfobox">
            <div className="topquanbox">
              <div className="topboders">
                <div className="topconterbox">
                  <span className="teber">{setAddtagname()}</span>
                  <span className="prigter">
                    ￥{compenterinfodata.quanhoupriter}
                  </span>
                </div>
                <div className="border-triangle-bottom"></div>
              </div>
              {(compenterinfodata.giftlist &&
                compenterinfodata.giftlist.length)
                //  ||
                // compenterinfodata.addnumsmanjian || compenterinfodata.addnumsmanjianOne 
                ? (
                  <>
                    <div className="tebers">当前商品,可以享受以下优惠</div>
                    <div className="retoubox">
                      <div className="buterbox">
                        <div className="topnumber">
                          {compenterinfodata.outinconter}
                          {/* {(goodDetail.getSkuPriter.price / 100).toFixed(2)} */}
                        </div>
                        <div className="boderconter">
                          <div className="topcpnter">当前售价</div>
                          {/* <div className="boterbin">3元</div> */}
                        </div>
                      </div>
                      {(compenterinfodata.giftlist &&
                        compenterinfodata.giftlist.length && (
                          <>
                            {...compenterinfodata.giftlist.map(
                              (giftitem, index) => {
                                return (
                                  <div key={index} style={{ display: "flex" }}>
                                    <div className="righter"></div>
                                    <div className="buterbox">
                                      <div className="topnumber">
                                        {giftitem.num}
                                      </div>
                                      <div className="boderconter">
                                        <div className="topcpnter">
                                          {giftitem.title}
                                        </div>
                                        <div className="boterbin">
                                          {giftitem.unit}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                )
                              }
                            )}
                          </>
                        )) ||
                        ""}
                      {/* {compenterinfodata.addnumsmanjian && (
                      <div style={{ display: "flex" }}>
                        <div className="righter"></div>
                        <div className="buterbox">
                          <div className="topnumber">
                            {compenterinfodata.dazeconte}
                          </div>
                          <div className="boderconter">
                            <div className="topcpnter">跨品多件</div>
                            <div className="boterbin">
                              {compenterinfodata.addnumsmanjian.title}
                            </div>
                          </div>
                        </div>
                      </div>
                    )}
                    {compenterinfodata.addnumsmanjianOne && (
                      <div style={{ display: "flex" }}>
                        <div className="righter"></div>
                        <div className="buterbox">
                          <div className="topnumber">
                            {compenterinfodata.dazeconte}
                          </div>
                          <div className="boderconter">
                            <div className="topcpnter">同品多件</div>
                            <div className="boterbin">
                              {compenterinfodata.addnumsmanjianOne.title}
                            </div>
                          </div>
                        </div>
                      </div>
                    )} */}
                    </div>
                  </>
                ) : (
                  <div
                    className="noaddcout"
                    style={{
                      margin: "10px 0",
                      height: "100px"
                    }}>
                    <div
                      className="titpeitconeg"
                      style={{
                        color: "#EE4F66",
                        fontSize: "13px",
                        fontWeight: 900,
                        marginBottom: "10px"
                      }}>
                      店铺没有设置任何优惠券,或参加满减活动
                    </div>
                    <div className="toaddactivt">
                      <Button
                        type="primary"
                        size="mini"
                        onClick={() => {
                          props.setDetailsStatus && props.setDetailsStatus(false)
                          gotointenpage(0)
                        }}>
                        前往添加
                      </Button>
                    </div>
                  </div>
                )}
            </div>
            {/* {detailsInfo.getDiscountActivityFarmetData.discount_type_string &&
              detailsInfo.getDiscountActivityFarmetData.discount_type_string
                .length && (
                <div className="manibe">
                  <div className="topconrt">满足条件后可享</div>
                  <div className="tagitem">
                    <Tag>店铺满减</Tag>
                    {...detailsInfo.getDiscountActivityFarmetData.discount_type_string.map(
                      (reyt, index) => {
                        return (
                          <span className="addtagebox" key={index}> {reyt.title} </span>
                        )
                      }
                    )}
                  </div>
                </div>
              )} */}
          </div>
        </div>
        {flashWithGoodsDataItem && (
          <>
            <Divider className="mogerboder" />
            <div className="addnumboxew">
              <div className="addnumboxconte rightliter">
                <span className="lfttiltle">
                  运费信息 ({flashWithGoodsDataItem.template_name})
                </span>
                <span
                  className="rightchous"
                  style={{
                    transform: showMenberIcon
                      ? "rotate(0deg)"
                      : "rotate(-180deg)",
                    transition: "all 0.3s",
                    cursor: "pointer"
                  }}>
                  <Icon
                    type="DirectionDownIcon"
                    className="rightconegr"
                    onClick={() => setshowMenberIcon(!showMenberIcon)}></Icon>
                </span>
              </div>
              <div
                className="youhuiqlishboy"
                style={{
                  height: showMenberIcon ? "auto" : "0px"
                }}>
                <div className="proutcon">
                  发货地区：{flashWithGoodsDataItem.yunfeiconterlist.fahuodi}
                  {flashWithGoodsDataItem.yunfeiconterlist.typeinder && (
                    <span className="manquanguo">全国包邮</span>
                  )}
                </div>
                {!flashWithGoodsDataItem.yunfeiconterlist.typeinder ? (
                  <>
                    <Table
                      pagination={{ position: ["none"] }}
                      columns={tabtitles}
                      rowKey="index"
                      dataSource={getonterdata}
                    />
                  </>
                ) : (
                  ""
                )}
              </div>
            </div>
          </>
        )}
        <Divider className="mogerboder" />
        <div className="addnumboxew">
          <div className="addnumboxconte rightliter">
            <span className="lfttiltle">商品享有优惠</span>
            <span
              className="rightchous"
              style={{
                transform: showCoulIcon ? "rotate(0deg)" : "rotate(-180deg)",
                transition: "all 0.3s",
                cursor: "pointer"
              }}>
              <Icon
                type="DirectionDownIcon"
                className="rightconegr"
                onClick={() => setshowCoulIcon(!showCoulIcon)}></Icon>
            </span>
          </div>
          <div
            className="youhuiqlishi"
            style={{
              height: showCoulIcon ? "auto" : "0px",
              overflow: "hidden",
              transition: "all 0.3s"
            }}>
            <div className="manjianbox">
              <div className="letrtag">
                {getDiscountActivityFarmetData.showstatus ?
                  <Tag>跨品多件</Tag> : getDiscountActivityOnePrdFarmetData.showstatus ?
                    <Tag> 同品多件</Tag> :
                    <Tag> 满减活动</Tag>}
              </div>
              <div className="rightaddcontetage">
                {getDiscountActivityFarmetData.showstatus ? (
                  <>
                    {...getDiscountActivityFarmetData.discount_type_string.map(
                      (resct, index) => {
                        return (
                          <div className="interconter" key={index}>
                            {resct.title}
                          </div>
                        )
                      }
                    )}
                    <Button
                      type="primary"
                      size="mini"
                      onClick={() => gotointenpage(1)}>
                      前往设置
                    </Button>
                  </>
                ) : getDiscountActivityOnePrdFarmetData.showstatus ? (
                  <>
                    {...getDiscountActivityOnePrdFarmetData.discount_type_string.map(
                      (resct, index) => {
                        return (
                          <div className="interconter" key={index}>
                            {resct.title}
                          </div>
                        )
                      }
                    )}
                    <Button
                      type="primary"
                      size="mini"
                      onClick={() => gotointenpage(1)}>
                      前往设置
                    </Button>
                  </>
                ) : (
                  <>
                    <div className="nointer">链接未参加满减</div>
                    <div className="gotuaddbox">
                      <Button
                        type="primary"
                        size="mini"
                        onClick={() => gotointenpage(1)}>
                        前往添加
                      </Button>
                    </div>
                  </>
                )}
              </div>
            </div>

            <div className="manjianbox">
              <div className="letrtag">
                <Tag>新人礼金</Tag>
              </div>
              <div className="rightaddcontetage">
                {getNewUserGiftFarmeData.showstatus ? (
                  <>
                    <div className="interconter">
                      {getNewUserGiftFarmeData.shownumcontern.title}
                      {getNewUserGiftFarmeData.shownumcontern.unit}
                    </div>
                    <div className="boteotop">
                      <Button
                        type="primary"
                        size="mini"
                        onClick={() => gotointenpage(2)}>
                        前往设置
                      </Button>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="nointer">链接未设置新人礼金</div>
                    <div className="gotuaddbox">
                      <Button
                        type="primary"
                        size="mini"
                        onClick={() => gotointenpage(2)}>
                        前往添加
                      </Button>
                    </div>
                  </>
                )}
              </div>
            </div>

            <div className="manjianbox">
              <div className="letrtag">
                <Tag>惊喜券</Tag>
              </div>
              <div className="rightaddcontetage">
                {supTicket && supTicket.length ? (
                  <>
                    {...supTicket.map((supitem, index) => {
                      return (
                        <div className="interconter" key={index}>
                          <Tag bordered>
                            {supitem.coutcontentinfos.goodrange}
                          </Tag>
                          <Tag bordered>
                            {supitem.coutcontentinfos.userconter}
                          </Tag>
                          {supitem.coutcontentinfos.couponname}
                          <Tag bordered transparentBg type="warn">
                            领{supitem.coutcontentinfos.applied_amount}
                          </Tag>/<Tag bordered transparentBg type="success">
                            总{supitem.coutcontentinfos.total_amount}
                          </Tag>
                          {/* {supitem.coutcontentinfos.applied_amount}/
                          
                          {supitem.coutcontentinfos.total_amount} */}
                        </div>
                      )
                    })}
                    <div className="boteotop">
                      <Button
                        type="primary"
                        size="mini"
                        onClick={() => gotointenpage(3)}>
                        前往设置
                      </Button>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="nointer">链接未设置惊喜券</div>
                    <div className="gotuaddbox">
                      <Button
                        type="primary"
                        size="mini"
                        onClick={() => gotointenpage(3)}>
                        前往添加
                      </Button>
                    </div>
                  </>
                )}
              </div>
            </div>

            <div className="manjianbox">
              <div className="letrtag">
                <Tag>优惠券</Tag>
              </div>
              <div className="rightaddcontetage">
                {couponData &&
                  couponData.filter((cot) => cot.coutcontentinfos).length ? (
                  <>
                    {...couponData.map((supitem, index) => {
                      return supitem.coutcontentinfos ? (
                        <div className="interconter" key={index}>
                          <Tag bordered>
                            {supitem.coutcontentinfos.goodrange}
                          </Tag>
                          <Tag bordered>
                            {supitem.coutcontentinfos.userconter}
                          </Tag>
                          {supitem.coutcontentinfos.couponname}
                          <Tag bordered transparentBg type="warn">
                            领{supitem.coutcontentinfos.applied_amount}
                          </Tag>/<Tag bordered transparentBg type="success">
                            总{supitem.coutcontentinfos.total_amount}
                          </Tag>
                          {/* {supitem.coutcontentinfos.applied_amount}/
                          
                          {supitem.coutcontentinfos.total_amount} */}
                        </div>
                      ) : (
                        ""
                      )
                    })}
                    <div className="boteotop">
                      <Button
                        type="primary"
                        size="mini"
                        onClick={() => {
                          props.setDetailsStatus && props.setDetailsStatus(false)

                          store.dispatch(LtaLp(3))
                        }}>
                        前往设置
                      </Button>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="nointer">链接未设置优惠券</div>
                    <div className="gotuaddbox">
                      <Button
                        type="primary"
                        size="mini"
                        onClick={() => {
                          props.setDetailsStatus && props.setDetailsStatus(false)

                          store.dispatch(LtaLp(3))
                        }}>
                        前往添加
                      </Button>
                    </div>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
        <Divider className="mogerboder" />
        <div className="addnumbox">
          <span className="addnumboxconte">购买数量</span>
          <InputNumber
            showCounter
            errorType="bubble"
            defaultValue={compenterinfodata.selectnum}
            max={compenterinfodata.getSkuPriter.user_limit || 99999}
            min={1}
            onChange={changeAddGoodsNum}
          />
        </div>

        <div className="footer-sku">
          {...displaySpecList.map((res, indexk) => {
            return (
              <div className="infotab" key={indexk}>
                <Divider className="mogerboder" />

                <div className="titleboxname">{res.name}</div>
                <div className="addskuitrmbox">
                  {...res.values.map((tag, index) => {
                    return (
                      <div
                        className={
                          tag.selectitem
                            ? "selectitem skuitemboxactive"
                            : "selectitem"
                        }
                        key={index}
                        onClick={() => setdata(res.id, tag.id)}>
                        {/* <img src="" className="yesimag" alt="" /> */}
                        <div className="skunames">{tag.name}</div>
                      </div>
                    )
                  })}
                </div>
              </div>
            )
          })}
        </div>
        {/* <div className="bottomconternt-offer">底部优惠券相关信息</div> */}
      </div>
    )) || (
      <div className="lodingbox">
        <Spin></Spin>
      </div>
    )
  )
}
